<script setup>
import { ref } from "vue"
import moment from "moment"
import { JsonViewer } from 'vue3-json-viewer'
import "vue3-json-viewer/dist/index.css";

const showDialog = ref(false)
const dialogData = ref({})
const activeName = ref("")
const getFormatDate = $Common.getFormatDate

const open = (row) => {
    dialogData.value = row
    // 转换actions
    try {
        dialogData.value.actions = dialogData.value.actions && dialogData.value.actions.map(x => {
            x.parameters = x.parameters && JSON.parse(x.parameters)
            x.executionTime = getFormatDate(x.executionTime)
            return x
        }) || []
    } catch(e) {
        console.error("转换actions存在异常!")
    }
    // 转换exceptions
    try {
        dialogData.value.exceptions = dialogData.value.exceptions && JSON.parse(dialogData.value.exceptions)
    } catch(e) {
        console.error("转换exceptions存在异常!")
    }
    // 转换entityChanges
    try {
        dialogData.value.entityChanges = dialogData.value.entityChanges && dialogData.value.entityChanges.map(x => {
        x.changeTime = getFormatDate(x.changeTime)
            return x
        }) || []
    } catch(e) {
        console.error("转换entityChanges存在异常!")
    }
    activeName.value = "basic"
    showDialog.value = true
}

const _close = () => {
    showDialog.value = false
}

// 暴露给父组件
defineExpose({
    open
})
</script>

<template>
    <el-dialog title="设置角色权限" class="c-el-dialog comp-operationlogsdetail-dialog" v-model="showDialog"
        :draggable="true" :before-close="_close" :close-on-click-modal="false" :append-to-body="true">
        <table class="basic-table">
        <tr>
          <td width="100">操作者</td>
          <td>{{ dialogData.userName }}</td>
        </tr>
        <tr>
          <td>操作时间</td>
          <td>{{ getFormatDate(dialogData.executionTime) }}</td>
        </tr>
        <tr>
          <td>操作者IP</td>
          <td>{{ dialogData.clientIpAddress }}</td>
        </tr>
        <tr>
          <td>执行时长</td>
          <td>{{ dialogData.executionDuration / 1000 }}秒</td>
        </tr>
        <tr>
          <td>请求URL</td>
          <td>{{ dialogData.url }}({{ dialogData.httpMethod }})</td>
        </tr>
        <tr>
          <td>状态码</td>
          <td>
            {{ dialogData.httpStatusCode }}
            <el-tag type="danger" size="small" v-if="dialogData.exceptions">异常</el-tag>
          </td>
        </tr>
        <tr>
          <td>浏览器信息</td>
          <td>{{ dialogData.browserInfo }}</td>
        </tr>
      </table>
      <el-tabs class="mrgt20" type="border-card" v-model="activeName"
        v-if="dialogData.actions && dialogData.actions.length > 0 || dialogData.exceptions || dialogData.entityChanges && dialogData.entityChanges.length > 0">
          <el-tab-pane label="Actions数据" name="basic" v-if="dialogData.actions && dialogData.actions.length > 0">
            <table class="action-table mrgt10 mrgb10" v-for="(item, index) in dialogData.actions" :key="'action' + index">
              <tr>
                <th>服务名：{{ item.serviceName }}</th>
              </tr>
              <tr>
                <td>
                  <!--json viewer-->
                  <JsonViewer :value="item" :expand-depth="5" copyable boxed sort></JsonViewer>
                </td>
              </tr>
            </table>
          </el-tab-pane>
          <el-tab-pane label="Exceptions异常数据" v-if="dialogData.exceptions" name="error">
            <JsonViewer :value="dialogData.exceptions" :expand-depth="5" copyable></JsonViewer>
          </el-tab-pane>
          <el-tab-pane label="Entity改变数据" v-if="dialogData.entityChanges && dialogData.entityChanges.length > 0" name="entity">
            <table class="action-table mrgt10 mrgb10" v-for="(item, index) in dialogData.entityChanges" :key="'entityChanges' + index">
              <tr>
                <th>服务名：{{ item.entityTypeFullName }}</th>
              </tr>
              <tr>
                <td>
                  <!--json viewer-->
                  <JsonViewer :value="item" :expand-depth="5" copyable></JsonViewer>
                </td>
              </tr>
            </table>
          </el-tab-pane>
        </el-tabs>
        <template #footer>
            <el-button @click="_close()">关闭</el-button>
        </template>
    </el-dialog>
</template>

<style lang="scss">
.comp-operationlogsdetail-dialog {
    margin-top: 5vh !important;
    max-width: 1200px;
    .basic-table {
        width: 100%;
        td {
            padding: 10px;
            border: 1px solid #dee2e6;
        }
    }
    .action-table {
        width: 100%;
        th {
            background-color: #f8f9fa;
        }
        th, td {
            padding: 10px;
            border: 1px solid #dee2e6;
        }
        .content {
            min-height: 60px;
        }
        .jv-container .jv-code {
            padding: 10px 20px;
        }
    }
}
</style>